import React from 'react';
import { Button, Card, Table, Flex, Rate } from 'antd';
import { vipLabelMap, vipColorMap } from '@/enums/vip.enum';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';

import type { TableColumnsType } from 'antd';
import type { DataType, OrderInfoType, AppraiserInfoType, EvaluationInfoType } from '../types/index.type';
import type { VipValueType } from '@/types/vip.type';

const customIcons: Record<number, React.ReactNode> = {
  1: <FrownOutlined />,
  2: <FrownOutlined />,
  3: <MehOutlined />,
  4: <SmileOutlined />,
  5: <SmileOutlined />,
};
const columns: TableColumnsType<DataType> = [
  {
    title: '评价信息',
    dataIndex: 'evaluationInfo',
    render: (evaluationInfo: EvaluationInfoType) => {
      return (
        <>
          <div>{evaluationInfo.content}</div>
          <div>{evaluationInfo.time}</div>
        </>
      );
    },
  },
  {
    title: '评价度',
    dataIndex: 'evaluationStar',
    render: evaluationStar => {
      return (
        <Flex gap="middle" vertical>
          <Rate allowHalf defaultValue={evaluationStar} character={({ index = 0 }) => customIcons[index + 1]} />
        </Flex>
      );
    },
  },
  {
    title: '评价人',
    dataIndex: 'appraiserInfo',
    render: (appraiserInfo: AppraiserInfoType) => {
      return (
        <div className="flex items-center">
          <img src={appraiserInfo.avatar} alt="productImage" className="w-30 h-30 rounded-15" />
          <div className="flex-1 ml-8">
            <div>{appraiserInfo.name}</div>
            <div>{appraiserInfo.phoneNumber}</div>
            <div style={{ color: vipColorMap[appraiserInfo.vipType] }}>{vipLabelMap[appraiserInfo.vipType]}</div>
          </div>
        </div>
      );
    },
  },
  {
    title: '订单信息',
    dataIndex: 'orderInfo',
    render: (orderInfo: OrderInfoType) => {
      return (
        <div className="flex items-center">
          <img src={orderInfo.orderImg} alt="productImage" className="w-30 h-30 rounded-15" />
          <div className="flex-1 ml-8">
            <div>{orderInfo.goodsName}</div>
            <div>{orderInfo.goodsType}</div>
            <div>{orderInfo.orderDate}</div>
          </div>
        </div>
      );
    },
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Button type="link" className="p-0">
        回复
      </Button>
    ),
  },
];

const data: DataType[] = [];
for (let i = 0; i < 56; i++) {
  data.push({
    key: i,
    evaluationInfo: { time: '2024-05-13 19:30', content: '物美价廉,裹上面包糠,小孩子都馋哭了' },
    evaluationStar: 2.5,
    appraiserInfo: {
      name: '胖虎',
      avatar: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
      phoneNumber: '17506668888',
      vipType: Math.floor(Math.random() * 7) as VipValueType,
    },
    orderInfo: {
      orderImg: `https://picsum.photos/30/30?random=${+new Date() + Math.random()}`,
      goodsName: '夏季男士超帅超豪华LV半截短袖',
      goodsType: `YFSP-${+new Date()}${Math.floor(Math.random() * 100)}`,
      orderDate: '2024-05-13',
    },
  });
}

const TableCard = () => {
  return (
    <Card className="mt-16">
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          pageSize: 5,
          showQuickJumper: true,
          onShowSizeChange: (current, size) => {
            console.log('🚀 ~ TableCard ~ current, size:', current, size);
          },
        }}
      />
    </Card>
  );
};

export default TableCard;
